<template>
  <div class="shaiXuan">
    <div class="pai">
      <i class="el-icon-printer"></i><span class="sort1">筛选</span>
    </div>
    <div class="box">
      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <h4 class="title">结算状态：</h4>
          <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
            placeholder="请选择结算状态"
            @select="handleSelect"
          ></el-autocomplete>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [],
      state1: "",
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [{ value: "已结算" }, { value: "未结算" }];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>

<style lang="scss" scoped>
.shaiXuan{
    position: relative;
}

.pai {
  font-size: 14px;
  color: rgb(23, 28, 73);
  font-weight: 600;
  margin-top: 40px;
  .el-icon-printer {
    color: rgb(33, 61, 192);
    font-size: 18px;
    font-weight: 600;
  }
  .sort1 {
    margin: 10px 20px 0 15px;
    font-size: 17px;
    font-weight: 600;
  }
}
.box {
    position: absolute;
    top: -10px;
    left: 110px;
    .el-col-12{
        width: 100%;
    }
  h4 {
    float: left;
    font-size: 16px;
    color: rgb(23, 28, 73);
    line-height: 0px;
  }
}
</style>